<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot 精准替换</title>
    <style>
    	.custom{font-size: 16px;border:1px solid green;}
    	.custom p{background: rgba(255,0,0,.3);}
    </style>
</head>
<body>
    <div id="app">
		<custom>
			<!-- 在父组件中 写入 html 结构目的是将html 插入子组件 -->
			<div slot="three">我是 div1 </div>
			<div slot="one">我是 div2 </div>
			<div slot="one">我是 div2 </div>
			<div slot="one">我是 div2 </div>
			<div slot="one">我是 div2 </div>
			<div slot="one">我是 div2 </div>
			<div slot="one">我是 div2 </div>
			<div slot="one">我是 div2 </div>
			<div slot="two">我是 div3 </div>
			<div slot="two">我是 div3 </div>
			<div slot="two">我是 div3 </div>
			<div slot="two">我是 div3 </div>
			<!-- <div>我是 div4 </div> -->
		</custom>
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>
 		/****************** 精准替换 **********************
			使用具名 slot
			在子组件中，指定 slot
 		***************************************************/
	    var custom = Vue.extend({
	    	template : `
				<div class="custom">
					<slot name="one"><p>这是1</p></slot>
					<slot name="two"><p>这是2</p></slot>
					<slot name="three"><p>这是3</p></slot>
				</div>
	    	`
	    });
	    Vue.component('custom',custom);
	    let vm = new Vue({
	    	el : '#app'
	    });
    </script>
</body>
</html>